<template>
  <div class="body">
    <div class="title">
      <img src="../assets/return.png" alt="" @click="targetPage">
      <p>五龙山野生动物园王国</p>
    </div>
    <div ref="canvasContainer" class="canvas-container" @touchstart="startTimer" @touchend="clearTimer"
      @touchcancel="clearTimer">
      <canvas ref="combinedCanvas"></canvas>
      <div v-if="showTip" class="save-tip">保存到相册 ✔️</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import QRCode from 'qrcode';
import { useRouter } from 'vue-router';
import bgImageUrl from '../assets/save.png';  // 直接导入图片
function targetPage() {
  router.push({
    path: '/mine',
  });
}
const router = useRouter();
const combinedCanvas = ref(null);
const canvasContainer = ref(null);
let longPressTimer = null;
const showTip = ref(false);

// 加载背景图片
const bgImage = new Image();
bgImage.src = bgImageUrl;  // 使用导入的图片 URL

// 生成二维码并绘制组合 Canvas
const generateCombinedImage = async () => {
  if (!combinedCanvas.value) return;

  const canvas = combinedCanvas.value;
  const ctx = canvas.getContext('2d');

  // 设置 Canvas 尺寸与背景图一致
  canvas.width = bgImage.naturalWidth || bgImage.width;
  canvas.height = bgImage.naturalHeight || bgImage.height;

  // 绘制背景
  ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);

  // 生成二维码
  const qrCanvas = document.createElement('canvas');
  await QRCode.toCanvas(qrCanvas, 'http://example.com', {
    width: 200,
    margin: 2,
    color: { dark: '#000000ff', light: '#ffffffff' }
  });

  // 居中绘制二维码
  const qrSize = 400;
  const qrX = (canvas.width - qrSize) / 1.9;
  const qrY = (canvas.height - qrSize) / 1.6;

  // 绘制二维码背景（圆角矩形）
  ctx.fillStyle = 'white';
  ctx.fillRect(qrX - 5, qrY - 5, qrSize + 10, qrSize + 10); // 仅修改这里！

  // 绘制二维码
  ctx.drawImage(qrCanvas, qrX, qrY, qrSize, qrSize);
};

// 长按保存逻辑
const startTimer = () => {
  longPressTimer = setTimeout(() => {
    // 确保从组合Canvas（combinedCanvas）获取数据，不是二维码Canvas
    const canvas = combinedCanvas.value; // 关键点：必须用这个Canvas
    const dataUrl = canvas.toDataURL('image/png');

    const link = document.createElement('a');
    link.download = '五龙山野生动物园.png';
    link.href = dataUrl;
    link.click();
  }, 1000);
  console.log('二维码已绘制到位置:', qrX, qrY);
};

const clearTimer = () => {
  if (longPressTimer) clearTimeout(longPressTimer);
};

onMounted(() => {
  bgImage.onload = generateCombinedImage;  // 图片加载完成后绘制
});
</script>

<style scoped>
/* 禁止文本选中和长按菜单 */
.body,
.canvas-container,
canvas {
  -webkit-user-select: none;
  /* Safari/iOS */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  user-select: none;
  /* 标准语法 */
  -webkit-touch-callout: none;
  /* 禁用iOS长按菜单 */
}

.body {
  width: 100%;
  height: 100vh;
  touch-action: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  outline: none;
  user-select: none;
}

.title {
  text-align: center;
  position: fixed;
  height: 50px;
  line-height: 50px;
  width: 100%;
  z-index: 1;
  outline: none;
  user-select: none;
}

.title img {
  width: 30px;
  height: 30px;
  left: 10px;
  top: 10px;
  position: absolute;
  border-radius: 50%;
  background-color: white;
  outline: none;
  user-select: none;
}

.canvas-container {
  position: relative;
  margin: 0 auto;
  touch-action: none;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.save-tip {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  animation: fade 1.5s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
</style>